<template>
	<view class="content">
		<image class="topBg" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/shareIn.png" mode=""></image>
		<view class="invitaCont">
			<view class="invi_title">邀请码</view>
			<view class="invitationcode">{{myCode}}</view>
			<view class="inTip">您的好友登录时可填写</view>
			<view class="canvas">
				<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
			</view>
			<!-- <view class="invitationBtn" @click="goShare">邀请好友</view> -->
		</view>
	</view>
</template>

<script>
	import uQRCode from '../../../../common/uqrcode.js'
	export default {
		data() {
			return {
				qrcodeText: '',
				qrcodeSize: 130,
				qrcodeSrc: '',
				myCode:''
			}
		},
		onLoad() {
			this.getUserInfo()
						
		},
		methods: {
			getUserInfo: function() {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.myCode=res.data.myCode
					this.qrcodeText = 'http://47.96.80.245:8011/appUser/register.htm?referralCode=' + this.myCode;
					this.make()	
				})
			},
			make() {
				uQRCode.make({
					canvasId: 'qrcode',
					text: this.qrcodeText,
					size: this.qrcodeSize,
					margin: 5,
					success: res => {
						console.log(res)
					},
					complete: () => {
					}
				})
			},
			// 邀请好友
			goShare: function () {
				
			}
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		font-family: 'PingFang SC';
		font-size: 28rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		height: 100%;
	}
	.topBg {
		width: 100vw;
		height: 100vh;
		position: relative;
	}
	.invitaCont {
		width: 400rpx;
		height: 550rpx;
		box-sizing: border-box;
		text-align: center;
		position: absolute;
		top: 22%;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 20;
		background: #FFFFFF;
		.invi_title {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #212121;
			line-height: 40rpx;
			letter-spacing: 2rpx;
		}
		.invitationcode {
			width: 100%;
			box-sizing: border-box;
			line-height: 98rpx;
			font-size: 70rpx;
			color: #EB2955;
			font-weight: 600;
		}
		.inTip {
			width: 100%;
			box-sizing: border-box;
			font-size: 22rpx;
			color: #666666;
			line-height: 40rpx;
			letter-spacing: 3rpx;
		}
		.canvas {
			text-align: center;
			margin: 20rpx 0;
		}
		
		.canvas canvas {
			margin: 0 auto;
		}
		.invitationBtn {
			width: 260rpx;
			box-sizing: border-box;
			text-align: center;
			line-height: 60rpx;
			background: linear-gradient(to right,#DE3143,#E42221);
			font-size: 24rpx;
			color: #FFFFFF;
			margin: 0 auto;
			border-radius: 37rpx;
		}
		
		
		
	}

</style>
